<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css" rel="stylesheet">
    <meta itemprop="image" content="static/img/20171124191801.jpg" />
    <link rel="stylesheet" href="./static/css/index.css">
    <title>秀场轰趴馆</title>
</head>

<body>
    <div class="mainContainer">
        <div class="gameContainer">
            <img class="gameBackground" src="./static/img/bg-center.png" alt="">
            <div class="simItemContainer giftItem item-5"></div>
            <div class="simItemContainer giftItem item-8"></div>
            <div class="simItemContainer giftItem item-10"></div>
            <div class="simItemContainer giftItem item-20"></div>
            <div class="simItemContainer giftItem item-500"></div>
            <div class="simItemContainer giftItem item-0"></div>
            <div class="simItemContainer giftItem item-50"></div>
            <div class="simItemContainer giftItem item-100"></div>
            <div class="simItemContainer activeBtn"></div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        // 获取带权重的随机数
        function weightRandom() {
            var randomConfig = [{
                id: 0,
                weight: 10,
                value: 5
            }, {
                id: 1,
                weight: 10,
                value: 8
            }, {
                id: 2,
                weight: 10,
                value: 10
            }, {
                id: 3,
                weight: 10,
                value: 20
            }, {
                id: 4,
                weight: 0,
                value: 500
            }, {
                id: 5,
                weight: 0,
                value: 0
            }, {
                id: 6,
                weight: 34,
                value: 50
            }, {
                id: 7,
                weight: 25,
                value: 100
            }];
            var randomList = [];
            for (var i in randomConfig) {
                for (var j = 0; j < randomConfig[i].weight; j++) {
                    randomList.push(randomConfig[i].id);
                }
            }
            var randomValue = randomList[Math.floor(Math.random() * randomList.length)];
            var r;
            for (var i of randomConfig) {
                if (i.id === randomValue) {
                    r = i;
                    break;
                }
            }
            return r;
        };
        // 开始游戏
        function startGame(maxNum, a, c) {
            // 定时器执行奖品变换动画
            var t = 10;
            for (var i = 0; i <= maxNum; i++) {
                (function (i) {
                    t += 5;
                    setTimeout(function () {
                        var l = i % 8;
                        a(l);
                        i === maxNum ? c(l) : true;
                    }, i * t)
                })(i)
            }
        }
        // 加载完成执行
        $(function () {
            // 游戏状态锁
            var gameLock = true;
            $(".activeBtn").on('click', function () {
                if(localStorage.getItem("message")!=null){
                    alert(localStorage.getItem("message"));
                    retun;
                }
                if (gameLock) {
                    // 给游戏加锁，防止多次点击
                    gameLock = false;
                    // 获取中奖结果
                    var _g = weightRandom();
                    // 开始动画
                    startGame(16 + _g.id, function (d) {
                        // 变换过程中执行的操作
                        $(".giftItem").eq(d).fadeIn(700).stop(false, true).fadeOut(100);
                    }, function (d) {
                        // 如果需要多次玩的，可以在中奖后解开限制
                        gameLock = true;
                        // 开始中获后的逻辑
                        $(".giftItem").eq(d).stop(true, false).fadeIn(400);
                        // 中奖后的操作
                        console.log('中奖啦' + _g.value)
                        // 其中0为免费试用场地，需要分别进行判断
                        // 此处试用setTimeout只是为了不阻碍主进程
                        setTimeout(function () {
                            localStorage.setItem('message','恭喜您中奖，奖品为' + _g.value + '元');
                            alert('恭喜您中奖，奖品为' + _g.value + '元')
                        }, 0)
                    });
                }
            })
        })
    </script>
</body>

</html>